import React from 'react';
import { connect } from 'dva';
import { List, Button, Grid, Badge, Icon } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import Container from '../components/Base/Container';
import styles from './PrecisionPage.css';
import MyIcon from '../components/Base/MyIcon';


const Item = List.Item;


class P extends React.Component { 

  render() {
    const { dispatch, items } = this.props;
    const data = [
      {
        icon: <img alt="" src={require('../assets/c1.png')} className="am-icon am-icon-lg" />,
        text: <div><Badge className={styles.ymTitle} text={items[0].length}  style={{ marginLeft: 10 }}>出生当天</Badge><div className={styles.ymDescription}>乙肝疫苗（第1次）、卡介苗初种</div></div>,
        title: '出生当天',
        num: items[0],
        href: '/p1',
      },
      {
        icon: <img alt="" src={require('../assets/c1.png')} className="am-icon am-icon-lg" />,
        text: <div><Badge className={styles.ymTitle} text={items[1].length}  style={{ marginLeft: 10 }}>1个月宝宝</Badge><div className={styles.ymDescription}>乙肝疫苗（第2次）</div></div>,
        title: '1个月宝宝',
        num: items[1],
        href: '/p1',
      },
      {
        icon: <img alt="" src={require('../assets/c2.png')} className="am-icon am-icon-lg" />,
        text: <div><Badge className={styles.ymTitle} text={items[2].length}  style={{ marginLeft: 10 }}>2个月宝宝</Badge><div className={styles.ymDescription}>脊灰疫苗（第1次）</div></div>,
        title: '2个月宝宝',
        num: items[2],
        href: '/p1',
      },
      {
        icon: <img alt="" src={require('../assets/c6.png')} className="am-icon am-icon-lg" />,
        text: <div><Badge className={styles.ymTitle} text={items[3].length}  style={{ marginLeft: 10 }}>3个月宝宝</Badge><div className={styles.ymDescription}>脊灰疫苗（第2次）、百白破疫苗（第1次）</div></div>,
        title: '3个月宝宝',
        num: items[3],
        href: '/p1',
      },
      {
        icon: <img alt="" src={require('../assets/c3.png')} className="am-icon am-icon-lg" />,
        text: <div><Badge className={styles.ymTitle} text={items[4].length}  style={{ marginLeft: 10 }}>4个月宝宝</Badge><div className={styles.ymDescription}>脊灰疫苗（第3次）、百白破疫苗（第2次）</div></div>,
        title: '4个月宝宝',
        num: items[4],
        href: '/p1',
      },
      {
        icon: <img alt="" src={require('../assets/c4.png')} className="am-icon am-icon-lg" />,
        text: <div><Badge className={styles.ymTitle} text={items[5].length}  style={{ marginLeft: 10 }}>5个月宝宝</Badge><div className={styles.ymDescription}>百白破疫苗（第3次）</div></div>,
        title: '5个月宝宝',
        num: items[5],
        href: '/p1',
      },
      {
        icon: <img alt="" src={require('../assets/c4.png')} className="am-icon am-icon-lg" />,
        text: <div><Badge className={styles.ymTitle} text={items[6].length}  style={{ marginLeft: 10 }}>6个月宝宝</Badge><div className={styles.ymDescription}>乙肝疫苗（第3次）、流脑疫苗（第1次）</div></div>,
        title: '6个月宝宝',
        num: items[6],
        href: '/p1',
      },
      {
        icon: <img alt="" src={require('../assets/c4.png')} className="am-icon am-icon-lg" />,
        text: <div><Badge className={styles.ymTitle} text={items[7].length}  style={{ marginLeft: 10 }}>8个月宝宝</Badge><div className={styles.ymDescription}>麻疹疫苗初种</div></div>,
        title: '8个月宝宝',
        num: items[7],
        href: '/p1',
      },
      {
        icon: <img alt="" src={require('../assets/c4.png')} className="am-icon am-icon-lg" />,
        text: <div><Badge className={styles.ymTitle} text={items[8].length}  style={{ marginLeft: 10 }}>9个月宝宝</Badge><div className={styles.ymDescription}>流脑疫苗（第2次）</div></div>,
        title: '9个月宝宝',
        num: items[8],
        href: '/p1',
      },
      {
        icon: <img alt="" src={require('../assets/c4.png')} className="am-icon am-icon-lg" />,
        text: <div><Badge className={styles.ymTitle} text={items[9].length}  style={{ marginLeft: 10 }}>12个月宝宝</Badge><div className={styles.ymDescription}>乙脑疫苗初种</div></div>,
        title: '12个月宝宝',
        num: items[9],
        href: '/p1',
      },
      {
        icon: <img alt="" src={require('../assets/c4.png')} className="am-icon am-icon-lg" />,
        text: <div><Badge className={styles.ymTitle} text={items[10].length}  style={{ marginLeft: 10 }}>1.5-2周岁宝宝</Badge><div className={styles.ymDescription}>乙脑疫苗加强、百白破疫苗加强、脊灰疫苗加强</div></div>,
        title: '1.5-2周岁宝宝',
        num: items[10],
        href: '/p1',
      },
      {
        icon: <img alt="" src={require('../assets/c4.png')} className="am-icon am-icon-lg" />,
        text: <div><Badge className={styles.ymTitle} text={items[11].length}  style={{ marginLeft: 10 }}>3岁</Badge><div className={styles.ymDescription}>流脑疫苗（第3次）</div></div>,
        title: '3岁',
        num: items[11],
        href: '/p1',
      },
    ];
    return (
      <Container title={this.props.location.query.title}>
      <div className={styles["notice"]}>
                <MyIcon className={styles["dpib"]}
                  type="trips" color="#fa3024" size="xs"
                />
                <span className={styles["notice-text-black"]}>总计：</span>
                <span className={styles["notice-text"]}>{items.total} 人</span>
        </div>

        

        <div className={styles["ym-container"]}>
          {data.map((item, index) => {
            return (
              <div 
              key={'yym' + index} 
              className={styles["ym-box"]}
              onClick={() => {
                dispatch(routerRedux.push({
                  pathname: item.href,
                  query: {
                    taskType: 12,
                    subType: index,
                    title: item.title,
                  },
                }));
              }}>
                {item.text}
                <div className={styles["icon-right"]}>
                <Icon type="right" size={"md"} />
                </div>
              </div>
            );
          })}
        </div>
      </Container>
    );
  }
}
export default connect((state, props) => {
  return { items: state.task.sub[12] };
})(P);
